<template>
    <div>
        <fieldset>
            <legend>不使用toRefs扩展对象(无法修改)</legend>
            <div>name:{{ name }}</div>
            <div>age:{{ age }}</div>
            <van-button @click="change">改变</van-button>
        </fieldset>
        <fieldset>
            <legend>使用toRefs扩展对象</legend>
            <div>name:{{ name1 }}</div>
            <div>age:{{ age1 }}</div>
            <van-button @click="change1">改变</van-button>
        </fieldset>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";

export default defineComponent({
    setup() {
        const state1 = reactive({ name: "zs", age: "18" });
        const change = () => {
            state1.name += "==";
            state1.age += "==";
        };
        const state2 = toRefs(reactive({ name1: "zs", age1: "18" }));
        const change1 = () => {
            state2.name1.value += "==";
            state2.age1.value += "==";
        };
        return {
            ...state1,
            ...state2,
            change,
            change1,
        };
    },
});
</script>

<style scoped></style>
